<!DOCTYPE html>
<html>
    <head>
    <style>
        #hcontainer {
            background-color: black;
        }
        .hbar {
            background-color: blue;
            color: white;
        }
        .w25 { width: 25% }
        .w50 { width: 50% }
        .w75 { width: 75% }
        .w100 { width: 100% }


        #vcontainer {
            background-color: black;
            height: 200px;
        }
        .vbar {
            background-color: blue;
            color: white;
        }
        .h25 { height: 25% }
    </style>
    </head>
    <body>
        <div id="hcontainer">
            <div class="hbar w25">25%</div>
            <div class="hbar w50">50%</div>
            <div class="hbar w75">75%</div>
            <div class="hbar w100">100%</div>
        </div>
        <br>
        <div id="vcontainer">
            <div class="vbar h25">25%</div>
        </div>
    </body>
</html>
